import React from 'react';
import cass from 'classnames';
import styles from './index.module.less';
import { toNow } from '../../utils/util';
import moment from 'moment';


export default class TaskItem extends React.Component {


    onRightClick = (e, isFinish, taskid) => {
        e.stopPropagation();
        e.preventDefault();

        const { onRightClick, data } = this.props;
        onRightClick(isFinish, taskid, data);
    }

    render() {
        const { innerRef, data, active, onClick, onRightClick, className, unHoverable, replaceFun } = this.props;
        const { begintime, ishost, stagename, recid, projectname, taskstatus, hasfile, isclientvisible } = data;
        const [statusText, type] = toNow(begintime, taskstatus === 2);
        const content = data.content || data.taskcontent;
        const begintimeText = moment(begintime).format('YYYY-MM-DD HH:mm');
        return (
            <div
                ref={innerRef}
                className={cass(styles.taskItem, { [styles.active]: active, 'hovergray': !unHoverable }, className)}
                onClick={onClick ? onClick : null}
            >
                <div className={cass(styles.first, {
                    [styles.finsh]: type === 4,
                    [styles.type1]: type === 1,
                    [styles.type2]: type === 2,
                    [styles.type3]: type === 3,
                })}
                >
                    {statusText}
                </div>
                <div className={styles.center}>
                    <div>
                        {begintimeText}
                        {ishost ? <span className={cass('mdi', 'mdi-flag', styles.flag)} key="flag" /> : null}
                        {hasfile ? <i className={cass('imgIcon file', styles.file)} /> : null}
                        {isclientvisible ? <span className={cass('mdi mdi-account', styles.client)} /> : null}
                    </div>
                    <div
                        className={styles.content}
                        dangerouslySetInnerHTML={replaceFun ? { __html: replaceFun(content) } : undefined}
                    >
                        {replaceFun ? null : content}
                    </div>
                    {stagename ? <div>{`[${stagename}] ${projectname}`}</div> : null}
                </div>
                {onRightClick ? (
                    <div className={styles.end} onClick={(e) => this.onRightClick(e, type === 4, recid)}>
                        {type === 4 ?
                            <span className={cass('mdi', 'mdi-circle', styles.finsh)} /> :
                            <span className={cass('mdi', 'mdi-circle-outline')} />
                        }
                    </div>
                ) : null}
            </div>
        )
    }
}